'use client'

import { useState } from "react"
import { CategoryItem } from "./category-item"
import { MagnifyingGlassIcon } from "@heroicons/react/24/outline"

type SerializedCategory = {
  id: number
  name: string
  createdAt: string
  updatedAt: string
  _count: {
    products: number
  }
}

interface CategoryListProps {
  categories: SerializedCategory[]
}

export function CategoryList({ categories }: CategoryListProps) {
  const [searchTerm, setSearchTerm] = useState("")
  
  const filteredCategories = categories.filter(category => 
    category.name.toLowerCase().includes(searchTerm.toLowerCase())
  )

  return (
    <div className="space-y-4">
      <div className="relative">
        <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
          <MagnifyingGlassIcon className="h-5 w-5 text-gray-400" />
        </div>
        <input
          type="text"
          placeholder="搜索分类..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          className="
            block w-full pl-10 pr-4 py-2.5
            rounded-lg
            border border-gray-300
            bg-white text-gray-900
            shadow-sm
            placeholder:text-gray-400
            focus:border-blue-500 focus:ring-1 focus:ring-blue-500
          "
        />
      </div>
      
      <div className="bg-white shadow rounded-lg overflow-hidden">
        <div className="min-w-full">
          <table className="min-w-full divide-y divide-gray-200">
            <thead className="bg-gray-50">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  分类名称
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  商品数量
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  创建时间
                </th>
                <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                  操作
                </th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {filteredCategories.map((category) => (
                <CategoryItem key={category.id} category={category} />
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
} 